<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('客户端新增')"/>
</head>
<style>
    .layui-input-block {
        margin-left: 165px;
        min-height: 36px;
    }
    .layui-form-label{
        width: 130px;
    }
</style>
<body>
<form class="layui-form">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-form-item">
                <label class="layui-form-label  layui-form-required">客户端名称</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" lay-verify="required" name="clientName"
                           placeholder="请输入客户端名称"
                           type="text">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">客户端密钥</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" lay-verify="required" name="clientSecret"
                           placeholder="请输入客户端密钥"
                           type="text">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">客户端类型</label>
                <div class="layui-input-block ">
                    <input type="radio" lay-filter="clientType" name="clientType" value="confidential" title="机密型"
                           checked>
                    <input type="radio" lay-filter="clientType" name="clientType" value="public" title="公共型">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">认证方式</label>
                <div class="layui-input-block layui-form">
                    <select id="clientAuthenticationMethods" lay-filter="clientAuthenticationMethods"
                            lay-verify="required"
                            name="clientAuthenticationMethods" xm-select="select1" xm-select-radio
                            xm-select-skin="normal">
                        <option value=""></option>
                        <option value="client_secret_basic">CLIENT_SECRET_BASIC</option>
                        <option value="client_secret_post">CLIENT_SECRET_POST</option>
                        <option value="client_secret_jwt">CLIENT_SECRET_JWT</option>
                        <option value="private_key_jwt">PRIVATE_KEY_JWT</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">授权方式</label>
                <div class="layui-input-block">
                    <select id="authorizationGrantTypes" lay-filter="authorizationGrantTypes" lay-verify="required"
                            name="authorizationGrantTypes" xm-select="select2"
                            xm-select-skin="normal">
                        <option value=""></option>
                        <option value="authorization_code">AUTHORIZATION_CODE</option>
                        <option value="client_credentials">CLIENT_CREDENTIALS</option>
                        <option value="refresh_token">REFRESH_TOKEN</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">授权范围</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" lay-verify="required" name="scopes"
                           placeholder="请输入授权范围，多个用英文逗号隔开"
                           type="text">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">重定向URI</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" lay-verify="required" name="redirectUris"
                           placeholder="请输入重定向uri，多个用英文逗号隔开"
                           type="text">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">proofKey</label>
                <div class="layui-input-block ">
                    <input type="radio" name="requireProofKey" value="true" title="需要">
                    <input type="radio" name="requireProofKey" value="false" title="不需要" checked>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">授权确认</label>
                <div class="layui-input-block ">
                    <input type="radio" name="requireAuthorizationConsent" value="true" title="需要" checked>
                    <input type="radio" name="requireAuthorizationConsent" value="false" title="不需要">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">JWK端点</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" name="jwkSetUrl"
                           placeholder="授权方式为PRIVATE_KEY_JWT时请输入客户端提供的jwkSetUrl"
                           type="text" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">签名算法</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" lay-filter="signingAlgorithm" name="signingAlgorithm"
                           placeholder="认证方式为CLIENT_SECRET_JWT或PRIVATE_KEY_JWT时需要指定签名算法"
                           type="text" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">访问令牌TTL（s）</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" name="accessTokenTimeToLive"
                           placeholder="访问令牌生存时间，单位秒"
                           type="number" value="300">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">令牌格式</label>
                <div class="layui-input-block ">
                    <input type="radio" name="tokenFormat" value="self-contained" title="透明令牌" checked>
                    <!--                    <input type="radio" name="tokenFormat" value="reference" title="不透明令牌">-->
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">复用刷新令牌</label>
                <div class="layui-input-block ">
                    <input type="radio" name="reuseRefreshTokens" value="true" title="复用" checked>
                    <input type="radio" name="reuseRefreshTokens" value="false" title="不复用">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">刷新令牌TTL（s）</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" name="refreshTokenTimeToLive"
                           placeholder="刷新令牌生存时间，单位秒"
                           type="number" value="3600">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">ID Token签名算法</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" name="idTokenSignatureAlgorithm"
                           placeholder="ID Token签名算法"
                           type="text" value="RS256" readonly>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button class="pear-btn pear-btn-primary pear-btn-sm" lay-filter="client-save" lay-submit="" type="submit">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button class="pear-btn pear-btn-sm" type="reset">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
<th:block th:include="include :: footer"/>
<script>
    layui.use(['form', 'select', 'jquery'], function () {
        let form = layui.form;

        let $ = layui.jquery;
        let formSelects = layui.select;

        let $clientAuthenticationMethods = $('#clientAuthenticationMethods');
        form.on('radio(clientType)', function (data) {
            $clientAuthenticationMethods.empty();
            let opts = data.value === 'confidential' ? '<option value=""></option>' +
                '<option value="client_secret_basic">CLIENT_SECRET_BASIC</option>' +
                '<option value="client_secret_post">CLIENT_SECRET_POST</option>' +
                '<option value="client_secret_jwt">CLIENT_SECRET_JWT</option>' +
                '<option value="private_key_jwt">PRIVATE_KEY_JWT</option>' :
                '<option value="none" selected >NONE</option>';
            $clientAuthenticationMethods.append(opts)
            formSelects.render('select1');
            formSelects.value('select1', ['none'])
        })

        formSelects.on('select1', function (id, vals, val, isAdd, isDisabled) {
            let name = val.name;
            let signingAlgorithm = null;
            let $jwk = $('input[name="jwkSetUrl"]');
            if (isAdd) {
                if (name === 'CLIENT_SECRET_JWT') {
                    signingAlgorithm = 'HS256';
                } else if (name === 'PRIVATE_KEY_JWT') {
                    signingAlgorithm = 'RS256';
                    $jwk.removeAttr("readonly");
                }
            } else {
                $jwk.attr("readonly", "readonly")
            }
            $('input[name="signingAlgorithm"]').val(signingAlgorithm);
            $jwk.val(null);
        }, true);

        form.on('submit(client-save)', function (data) {
            let field = data.field;
            field.clientAuthenticationMethods = field.clientAuthenticationMethods.split(',')
            field.authorizationGrantTypes = field.authorizationGrantTypes.split(',')
            field.scopes = field.scopes.split(',')
            field.redirectUris = field.redirectUris.split(',')
            field.clientSettings = {
                requireProofKey: field.requireProofKey,
                requireAuthorizationConsent: field.requireAuthorizationConsent,
                jwkSetUrl: field.jwkSetUrl,
                signingAlgorithm: field.signingAlgorithm
            }
            field.tokenSettings = {
                accessTokenTimeToLive: `PT${field.accessTokenTimeToLive}S`,
                tokenFormat: field.tokenFormat,
                reuseRefreshTokens: field.reuseRefreshTokens,
                refreshTokenTimeToLive: `PT${field.refreshTokenTimeToLive}S`,
                idTokenSignatureAlgorithm: field.idTokenSignatureAlgorithm
            }
            $.ajax({
                url: '/system/client/add',
                data: JSON.stringify(field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    if (result.code === 200) {
                        layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                            parent.layui.table.reload("client-table");
                        });
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 1000});
                    }
                }
            })
            return false;
        });
    })
</script>
</body>
</html>